{% extends "base.html" %}

{% block extra_head %}
{% load bootstrap_toolkit %}
{% endblock %}

{% block content %}
<div class="row">
	<div class="span3">
		<form action="{% url event_create %}" method="post">
			<fieldset>
				<legend>Add An Event</legend>
				{% csrf_token %}
				{{ form|as_bootstrap }}
				<div class="actions">
					<button type="submit" class="btn btn-large btn-primary">Submit</button>
				</div>
			</fieldset>
		</form>
	</div>
	<div class="span9">
		<div class="well">
			<h2>Events</h2>
			{% if events|length > 0 %}
			<table class="table">
				<thead>
					<tr>
						<th style="width: 18%">Name</th>
						<th style="width: 7%">Date</th>
						<th style="width: 7%">Time</th>
						<th style="width: 16%">Location</th>
                        <th style="width: 16%">Distance</th>
					</tr>
				</thead>
				{% for event in events %}
                <tbody>
				    <tr>
					    <td><a href="{% url event_view event.id %}">{{ event.name }}</a></td>
					    <td>{{ event.date|date:"SHORT_DATE_FORMAT" }}</td>
                        <td>{{ event.time|time:'h:i A' }}
					    <td>{{ event.location }}</td>
					    <td>{{ event.distance|stringformat:"i "|add:event.unit }}</td>                 
				    </tr>
                </tbody>
			   {% endfor %} 
			</table>           
			{% else %}
				<h3>There are currently no events in the system.</h3>
			{% endif %}
		</div>
	</div>
</div>
{% endblock %}

{% block extra_end %}
<script type="text/javascript">
    $(document).ready(function() {
            $(".timepicker-widget").each(function () {
                var options = { 'showMeridian':true };
                    
                $(this).timepicker(options);
            });
        });
</script>
{% endblock %}